<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <div class="headBox">
          <el-icon style="vertical-align: middle" @click="handleFullScreen">
            <FullScreen />
          </el-icon>
          <div>
            <span>主题颜色</span>
            <el-color-picker v-model="color" show-alpha :predefine="predefineColors" @change="colorChange" />
          </div>
          <div>
            <span>主题切换</span>
            <el-switch v-model="value2" class="mt-2" style="margin-left: 24px" inline-prompt :active-icon="Check"
              :inactive-icon="Close" @change="switchChange" />
          </div>
          <div class="setbox">
            <el-dropdown @command="command">
              <span class="el-dropdown-link">
                {{ userStore.username }}
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="1">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </el-header>
      <el-container class="box">
        <el-aside width="200px">
          <Leftside />
        </el-aside>
        <el-scrollbar style="width: 100%;">
          <el-main>
            <router-view> </router-view>
          </el-main>
        </el-scrollbar>
      </el-container>
    </el-container>
  </div>
</template>
<script setup lang="ts">
import {
  FullScreen,
  Check,
  Close,
  ArrowDown,
  Setting
} from '@element-plus/icons-vue'
import Leftside from '../components/Leftside.vue';
import { ref } from 'vue'
import useUserStore from '@/store/user'
let userStore = useUserStore()
import { useRoute, useRouter } from 'vue-router'
let $router = useRouter()

const color = ref('rgba(255, 69, 0, 0.68)')
const value2 = ref(false)
const predefineColors = ref([
  '#ff4500',
  '#ff8c00',
  '#ffd700',
  '#90ee90',
  '#00ced1',
  '#1e90ff',
  '#c71585',
  'rgba(255, 69, 0, 0.68)',
  'rgb(255, 120, 0)',
  'hsv(51, 100, 98)',
  'hsva(120, 40, 94, 0.5)',
  'hsl(181, 100%, 37%)',
  'hsla(209, 100%, 56%, 0.73)',
  '#c7158577',
])

const switchChange = (val: boolean) => {
  let html = document.documentElement
  html.className = val ? 'dark' : ''
}

const command = (val:number) => {
  if (val == 1) {
    localStorage.removeItem('TOKEN')
    userStore.token = ''
    userStore.username = ''
    userStore.avatar = ''
    $router.push({
      path: '/login'
    })
  }
}

const colorChange = () => {
  let doc = document.documentElement
  doc.style.setProperty('--el-color-primary', color.value)
}
const handleFullScreen = () => {
  console.log(document.documentElement.requestFullscreen)
  let full = document.fullscreenElement
  if (!full) {
    document.documentElement.requestFullscreen()
  } else {
    document.exitFullscreen()
  }
}
</script>

<style scoped lang="less">
.headBox {
  display: flex;
  align-items: center;
  height: 100%;
  justify-content: space-between;
  color: white;
}

.fade-enter-from {
  opacity: 0;
}

.fade-enter-active {
  transition: all 1s;
}

.fade-enter-to {
  opacity: 1;
}

.wrap {
  display: flex;
  height: 100vh;
}

.left {
  width: 200px;
  background: white;

}

.right {
  flex: 1;
}

.common-layout {
  .el-header {
    background: #1890ff;
  }

  .el-aside {
    height: 100%;
  }

  .box {
    height: calc(100vh - 60px);
  }
}

:deep(.el-menu-vertical-demo) {
  height: 100%;
}

.el-dropdown-link {
  color: white;
}
.setbox{
  display: flex;
  align-items: center;
  .set{
    margin-top: 3px;
    margin-right: 5px;
  }
}
</style>
